console.log('Script Start');

Promise.resolve().then(() => {
  console.log('Promise 1');
});

setTimeout(() => {
  console.log('setTimeout 1 start');
  Promise.resolve().then(() => {
    console.log('setTimeout Promise 1');
  });
  console.log('setTimeout 1 end');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 2');
});

setTimeout(() => {
  console.log('setTimeout 2 start');
  Promise.resolve().then(() => {
    console.log('setTimeout Promise 2');
  });
  console.log('setTimeout 2 end');
}, 0);

console.log('Script End');

/**
 * Script Start
 * Script End
 * Promise 1
 * Promise 2
 * setTimeout 1 start
 * setTimeout 1 end
 * setTimeout Promise 1
 * setTimeout 2 start
 * setTimeout 2 end
 * setTimeout Promise 2
 */

// 对于这种执行顺序的问题，了解“事件循环”概念非常重要。
// 事件循环涉及到两种类型的任务：
// 宏任务（Macro-task）和微任务（Micro-task），这两种任务类型构成了 JavaScript 异步操作的基础，：
// 宏任务：包括整体代码块、setTimeout、setInterval、I/O操作、UI渲染等。每当一个宏任务执行完毕，JavaScript 引擎会检查微任务队列并执行所有等待中的微任务，之后才会开始下一个宏任务。
// 微任务：包括 Promise 的回调、MutationObserver、process.nextTick（Node.js 环境）、async/await 等。微任务的特点是在当前任务完成后立即执行。

new Promise((resolve, reject) => {
  console.log(1);
  new Promise((resolve, reject) => {
    console.log(2);
    setTimeout(() => {
      resolve(3);
      console.log(4);
    });
  }).then((data) => {
    setTimeout(() => {
      console.log(5);
    });
    console.log(data);
  });
  
  setTimeout(() => {
    resolve(6);
    console.log(7);
  });
}).then((data) => {
  console.log(data);
  setTimeout(() => {
    console.log(8);
  });
  console.log(9);
});
// 1,2,4,3,7,6,9,5,8

